<template>
	<view class="content" v-show="show">
		<view class="cart-head-tit" v-show="cartList != ''">
			<text class="head-t-1">共{{ cartNum }}件宝贝</text>
			<text class="head-t-2" @click="adminShow = !adminShow">{{ adminShow ? '完成' : '管理'}}</text>
		</view>
		<view class="car-head" v-show="cartList == ''">
			<u-empty mode="car" text="购物车还是空的" iconColor="#f18b49"></u-empty>
			<view class="shop-btn">
				<navigator url="../index/index" open-type="switchTab">
					<u-button color="#f18b49" text="先去逛逛" plain></u-button>
				</navigator>
			</view>
		</view>
		<view class="cart-list" v-show="token">
			<view class="cart-list-box" v-for="(item,index) in cartList" :key="index">
				<view class="list-box-head">
					<image src="../../static/cart/store.png" mode=""></image>
					<text>国集采供应链</text>
					<u-icon name="arrow-right" size="15" style="margin: 5rpx 0 0 5rpx;"></u-icon>
				</view>
				<view class="list-box-cont">
					<view class="listbox-cont-left">
						<radio :checked="checkedList.includes(item)"  @click="checkedRadio(item)" color="#f18b49"/>
						<image :src="baseUrl + item.img" @click="toProductDetail(item.goods_id)"></image>
					</view>
					<view class="listbox-cont-right">
						<view class="cont-r-top" @click="toProductDetail(item.goods_id)">
							<view v-if="item.specs" class="cont-right-top">{{ item.name }}</view>
							<view v-else class="cont-right-top1">{{ item.name }}</view>
							<view class="cont-spec" ref="spec" v-if="item.specs">{{ item.specs }}</view>
							<view v-else></view>
						</view>
						<view class="cont-right-bot">
							<view class="cont-price-box">
								<text class="price-icon">￥</text>
								<text class="price-tit">{{ item.sell_price }}</text>
							</view>
							<u-number-box v-model="item.count" @change="valChange(index,$event,item)" @overlimit="overLimit" integer :inputWidth="50" color="#f18b49":min="1" :max="999999"></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bot-position" v-show="token && cartList != ''">
			<view class="bot-posi-box">
				<view class="bot-pst-left" @click="allCheckedRadio()">
					<radio :checked="checkedList.length === cartList.length" color="#f18b49"/>
					<text>全选</text>
				</view>
				<view class="bot-pst-right-del"  v-if="adminShow">
					<!-- <text class="col-btn">移入收藏夹</text> -->
					<view class="del-btn" @click="delCart()">删除</view>
				</view>
				<view class="bot-pst-right" v-else>
					<text class="total-tit">合计:</text>
					<text class="pri-icon">￥</text>
					<!-- <text class="pri-tit">{{ cartPrice }}</text> -->
					<u-count-to :startVal="0" :endVal="cartPrice" :decimals="2" fontSize="38rpx" color="#ff914d" style="margin-right: 15rpx;"></u-count-to>
					<view class="jies-btn" @click="onceBuy()">结算</view>
				</view>
			</view>
		</view>
		<!-- 推荐列表 -->
		<view class="pro-list" v-show="token" :class="{prolist1: cartList != ''}">
			<view class="prolist-tuijie">
				<text>为你推荐</text>
			</view>
			<view class="pro-list-box">
				<view class="list-box" v-for="(item,index) in commendList" :key="index">
					<view class="list-img" @click="toProductDetail(item.id)">
						<image :src="baseUrl + item.img" mode="widthFix"></image>
					</view>
					<view class="">
						<view class="list-cont" @click="toProductDetail(item.id)">
							<text>推荐</text>{{ item.name }}
						</view>
						<view class="price-box">
							<view class="list-price">
								<text>￥</text>{{ item.sell_price }}
							</view>
							<image src="../../static/index/cart.png" @click="addCart(item.id)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				userId: '',
				show: false,
				cartNum: 0, //总数量
				cartPrice: 0, //合计
				adminShow: false, //管理-删除
				cartList: [], //购物车列表
				checkedList:[],	// 单选列表
				jiesuanList: [],
				commendList: [], //推荐列表
				baseUrl: 'https://gjc.hy-dzsc.cn/'
			}
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading()
					this.getcommendList()
					this.show = true
				}, 600)
			} else {
				this.show = false
				this.getcommendList()
			}
		},
		onShow() {
			// this.cartList = []
			this.checkedList = []
			this.token = uni.getStorageSync('token')
			if(this.token){
				this.show = false
				this.userId = uni.getStorageSync('userid')
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading()
					this.getCartList()
					this.show = true
				}, 600)
			} else {
				this.show = false
				this.loginVerify()
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getCartList()
				this.getcommendList()
				uni.stopPullDownRefresh()
			},800)
		},
		onReachBottom() {
			uni.showToast({
				title: '已经到底啦',
				duration: 1000,
				icon: 'none'
			})
		},
		watch:{
			checkedList:{
				deep:true,
				immediate:true,
				handler:function(nw,old){
					let sum = 0
					nw.forEach(v => {
						sum += v.count * Number(v.sell_price)
					})
					this.cartPrice = sum.toFixed(2)
				}
			}
		},
		methods: {
			// 登录验证
			loginVerify(){
				uni.showModal({
					title: '登录验证',
					cancelText: '先逛逛',
					confirmText: '去登录',
					confirmColor: '#f18b49',
					content: '账号未登录，无法查看购物车信息！',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/code-login'
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			// 获取为你推荐
			getcommendList() {
				this.$getHttp('/gjcApi/getShoppingGoods?user_id=' + this.userId, {}, res => {
					this.commendList = res
				})
			},
			// 获取购物车列表
			getCartList() {
				this.$getHttp('/gjcApi/showCart', { user_id: this.userId }, res => {
					this.cartList = res.data
					this.cartNum = res.data.length
				})
			},
			
			//单选框
			checkedRadio(item){
				if(this.checkedList.includes(item)){
					const index = this.checkedList.indexOf(item)
					this.checkedList.splice(index, 1)
				}else{
					this.checkedList.push(item)
				}
			},
			// 全选
			allCheckedRadio() {
				if (this.cartList.length === this.checkedList.length) {
					this.checkedList = []
				} else {
					this.checkedList = []
					this.cartList.forEach(v => {
						this.checkedList.push(v)
					})
				}
			},
			// 删除购物车列表
			delCart(){
				if(this.checkedList.length === 0){
					uni.showToast({
						title: '请选择你要删除的商品',
						duration: 1500,
						icon: 'none'
					})
				} else {
					let arrId = []
					let arrType = []
					this.checkedList.forEach((v, i) => {
						if(this.cartList.indexOf(v) != -1){
							this.cartList.splice(this.cartList.indexOf(v), 1)
							arrId.push(v.id)
							arrType.push(v.type)
						}
					})
					this.$getHttp('/gjcApi/removeCart?goods_id=' + arrId + '&type=' + arrType + '&user_id=' + this.userId, {}, res => {
					 	if(res.isError == false){
							uni.showToast({
								title: '已删除选中商品',
								duration: 1000,
								icon: 'none'
							})
							this.getCartList()
						}
					})
					this.checkedList = []
				}
			},
			// 添加购物车
			addCart(id){
				this.$getHttp('/gjcApi/joinCart?goods_id=' + id + '&type=goods&goods_num=1', { user_id: this.userId }, res => {
					if(res.isError == 406){
						uni.showToast({
							title: '请先选择商品规格参数',
							icon: 'none'
						})
						setTimeout(() => {
							uni.hideToast()
							this.toProductDetail(id)
						},1000)
					} else if(res.isError == 407){
						uni.showToast({
							title: '该商品库存不足，再等等',
							duration: 1200,
							icon: 'none'
						})
					} else if(res.isError == 408){
						uni.showToast({
							title: '加入购物车失败，已超出购物车容量',
							duration: 1500,
							icon: 'none'
						})
					} else {
						this.getCartList()
						uni.showToast({
							title: '已加入购物车',
							duration: 1000,
							icon: 'none'
						})
					}
				})
			},
			// 跳转商品详情
			toProductDetail(id){
				uni.navigateTo({
					url: `/pages/class/product-detail?proId=${id}&userId=${this.userId}`
				})
			},
			// 商品数量加减
			valChange(index,e,item){
				this.cartList[index].count = e.value
				this.$getHttp(`/gjcApi/batchRemoveCart?goods_id=${item.id}&type=${item.type}&count=${e.value}&user_id=${this.userId}`, {}, res => {})
			},
			// 商品数量最大或最小时触发  minus-最小  plus-最大
			overLimit(e){
				if(e == 'minus'){
					uni.showToast({
						title: '购买数量不能再少了！',
						duration: 1500,
						icon: 'none'
					})
				}
			},
			// 结算
			onceBuy(){
				if(this.checkedList.length === 0){
					uni.showToast({
						title: '请选择你要结算的商品',
						duration: 1500,
						icon: 'none'
					})
				} else {
					this.jiesuanList = []
					this.checkedList.forEach(v => {
						let json = {}
						json.id = v.id
						json.count = v.count
						json.type = v.type
						this.jiesuanList.push(json)
					})
					const data = {
						list: this.jiesuanList,
						sum: this.cartPrice,
						user_id: this.userId
					}
					uni.navigateTo({
						url: `/pages/cart/confirm-order?data=${JSON.stringify(data)}&userId=${data.user_id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.cart-head-tit{
			display: flex;
			margin-bottom: 20rpx;
			padding: 10rpx 30rpx 0 30rpx;
			justify-content: space-between;
			.head-t-1{
				font-size: 34rpx;
				font-weight: bold;
				color: $uni-text-color;
			}
			.head-t-2{
				font-size: 30rpx;
				margin-top: 4rpx;
			}
		}
		.car-head{
			padding: 150rpx 0 100rpx 0;
			background: $uni-model-color;
			.shop-btn{
				margin-top: 30rpx;
				padding: 30rpx 260rpx;
			}
		}
		.cart-list{
			padding: 0 15rpx;
			.cart-list-box{
				margin-top: 20rpx;
				padding: 25rpx 20rpx;
				border-radius: 20rpx;
				background: $uni-model-color;
				.list-box-head{
					display: flex;
					margin-left: 10rpx;
					align-items: center;
					image{
						width: 38rpx;
						height: 38rpx;
						margin-right: 8rpx;
					}
					text{
						font-size: 30rpx;
						margin-left: 5rpx;
						font-weight: bold;
						letter-spacing: 1rpx;
					}
				}
				.list-box-cont{
					display: flex;
					margin-top: 30rpx;
					.listbox-cont-left{
						display: flex;
						align-items: center;
						image{
							flex-shrink: 1;
							width: 200rpx;
							height: 200rpx;
							margin-left: 4rpx;
							border-radius: 10rpx;
							border: 2rpx solid $uni-text-color;
						}
					}
					.listbox-cont-right{
						width: 444rpx;
						display: flex;
						margin-left: 20rpx;
						flex-direction: column;
						justify-content: space-between;
						.cont-r-top{
							.cont-right-top{
								overflow:hidden;
								font-size: 28rpx;
								font-weight: bold;
								letter-spacing: 1rpx;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}
							.cont-right-top1{
								overflow:hidden;
								font-size: 28rpx;
								font-weight: bold;
								letter-spacing: 1rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
							.cont-spec{
								padding: 6rpx;
								font-size: 22rpx;
								margin-top: 8rpx;
								border-radius: 10rpx;
								background-color: #f4f4f4;
								color: $uni-text-color-grey;
							}
						}
						.cont-right-bot{
							display: flex;
							align-items: center;
							color: $uni-text-color;
							justify-content: space-between;
							.cont-price-box{
								.price-icon{
									font-size: 24rpx;
								}
								.price-tit{
									font-size: 32rpx;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
		.bot-position{
			z-index: 1;
			width: 750rpx;
			position: fixed;
			background: $uni-model-color;
			bottom: var(--window-bottom,0);
			.bot-posi-box{
				display: flex;
				padding: 10rpx 15rpx;
				justify-content: space-between;
				.bot-pst-left{
					display: flex;
					align-items: center;
					text{
						font-size: 28rpx;
						color: $uni-text-color-grey;
					}
				}
				.bot-pst-right{
					display: flex;
					align-items: center;
					.total-tit{
						font-size: 28rpx;
					}
					.pri-icon{
						color: #ff914d;
						font-size: 26rpx;
						margin: 6rpx 0 0 10rpx;
					}
					.pri-tit{
						color: #ff914d;
						font-size: 34rpx;
						margin-right: 20rpx;
					}
					.jies-btn{
						font-size: 30rpx;
						background: #ff914d;
						border-radius: 60rpx;
						padding: 20rpx 50rpx;
						color: $uni-model-color;
					}
				}
				.bot-pst-right-del{
					display: flex;
					align-items: center;
					.col-btn{
						font-size: 24rpx;
						margin-right: 15rpx;
						border-radius: 50rpx;
						padding: 22rpx 25rpx;
						color: $uni-text-color;
						background: $uni-model-color;
						border: 2rpx solid $uni-text-color;
					}
					.del-btn{
						font-size: 24rpx;
						border-radius: 50rpx;
						padding: 22rpx 40rpx;
						color: $uni-color-error;
						background: $uni-model-color;
						border: 2rpx solid $uni-color-error;
					}
				}
			}
		}
		.pro-list {
			padding: 0 15rpx;
			&.prolist1{
				margin-bottom: 95rpx;
			}
			.prolist-tuijie{
				text-align: center;
				padding: 50rpx 0 30rpx 0;
				text{
					font-size: 34rpx;
					font-weight: bold;
					letter-spacing: 12rpx;
					color: $uni-text-color;
				}
			}
			.pro-list-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.list-box {
					display: flex;
					width: 49%;
					border-radius: 15rpx;
					margin-bottom: 15rpx;
					padding-bottom: 20rpx;
					flex-direction: column;
					background: $uni-model-color;
					justify-content: space-between;
					.list-img {
						padding: 15rpx;
						text-align: center;
						image {
							width: 100%;
							border-radius: 10rpx;
							border: 2rpx solid $uni-text-color;
						}
					}
					.list-cont {
						font-size: 28rpx;
						overflow: hidden;
						display: -webkit-box;
						margin-bottom: 15rpx;
						-webkit-line-clamp: 2;
						padding: 5rpx 20rpx 0 20rpx;
						-webkit-box-orient: vertical;
						text {
							font-size: 24rpx;
							margin-right: 6rpx;
							padding: 2rpx 12rpx;
							border-radius: 20rpx;
							color: $uni-model-color;
							background: $uni-text-color;
						}
					}
		
					.price-box {
						display: flex;
						padding: 0 20rpx;
						align-items: center;
						justify-content: space-between;
						.list-price {
							font-size: 32rpx;
							font-weight: bold;
							color: $uni-text-color;
							text {
								font-size: 24rpx;
							}
						}
						image {
							width: 36rpx;
							height: 36rpx;
							padding: 8rpx;
							border-radius: 50%;
							border: 2rpx solid $uni-text-color;
						}
					}
				}
			}
		}
	}
</style>
